import React, { FC } from 'react'
import { NavBar, TabBar } from 'antd-mobile'
import {
  Route,
  Switch,
  useHistory,
  useLocation,
  MemoryRouter as Router,
  Redirect
} from 'react-router-dom'
import {
  AppOutline,
  AddSquareOutline,
  AddCircleOutline,
  MessageOutline,
  UserOutline
} from 'antd-mobile-icons';
import Sty from "./style/app.module.css";
import Home from './view/home/index'
import Square from './view/square/index'
import Publish from './view/publish/index'
import Message from './view/message/index'
import Active from './view/message/activemsg'
import Gcmsg from './view/message/gcmsg'
import Talk from './view/message/talk'
import Me from './view/me/index'
import SquareDetail from "./view/square/squareDetail";
import TopDetail from "./view/square/topDetail";
import WeafDetail from "./view/square/welfDetail"
import WeafActive from "./view/square/weafActive"
import squareSearch from "./view/square/search"
import Idle from "./view/publish/idle"
import PublishSubmit from "./view/publish/publishSubmit"
import Start from './view/starts/Index'
import Login from './view/Login/Index'
import Guide from './view/starts/Guide'


const Bottom: FC = () => {
  const history = useHistory()
  const location = useLocation()
  const { pathname } = location
  const setRouteActive = (value: string) => {
    history.push(value)
  }
  console.log(pathname)
  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/square',
      title: '广场',
      icon: <AddSquareOutline />,
    },
    {
      key: '/publish',
      title: '发布',
      icon: <AddCircleOutline />
    },
    {
      key: '/message',
      title: '信息',
      icon: <MessageOutline />
    },
    {
      key: '/me',
      title: '我的',
      icon: <UserOutline />,
    },
  ]

  return (
    <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
      {tabs.map(item => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
      ))}
    </TabBar>
  )
}

export default () => {
  return (
    <Router initialEntries={['/square']}>
      <div className='app'>
        {/* <div className='top'> */}
        {/* <NavBar>配合路由使用</NavBar> */}
        {/* </div> */}
        <Router initialEntries={['/message']}>
          <div className='app'>
            {/* <div className='top'>

        </div> */}
            <div className='body'>
              <Switch>
                <Route exact path='/' component={Login}></Route>
                <Route exact path='/guide' component={Guide}></Route>
                <Route exact path='/home' component={Home}></Route>
                <Route path='/square' component={Square}></Route>
                <Route path='/publish' component={Publish}></Route>
                <Route path='/message' component={Message}></Route>
                <Route path='/activedetails' component={Active}></Route>
                <Route path='/gcmsg' component={Gcmsg}></Route>
                <Route path='/talk' component={Talk}></Route>
                <Route path='/me' component={Me}></Route>
                <Route path='/squaredetail/:id' component={SquareDetail}></Route>
                <Route path='/topicdetail/:id' component={TopDetail}></Route>
                <Route path='/weafdetail/:id' component={WeafDetail}></Route>
                <Route path='/weafactive' component={WeafActive}></Route>
                <Route path='/squaresearch' component={squareSearch}></Route>
                <Route path='/idle' component={Idle}></Route>
                <Route path='/publishsubmit' component={PublishSubmit}></Route>
              </Switch>
            </div>
            <div className={Sty.bottom}>
              {/* <div className='bottom'>
          <Bottom />
        </div> */}
            </div>
          </div>
        </Router >
      </div>
    </Router>
  )
}
